import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    //state是固定的
    this.state = {
      // 对象里面的属性,随便写
      c: 0,
      msg: 'hello state',
    }
  }

  // 在类的结构体中定义函数,按照下面的语法写.handle是加到了Count的原型对象上
  handle() {
    // console.log(123)
    // 注意: setState是异步的
    this.setState({
      c: this.state.c + 1, //c:1
    })
    // console.log(this.state.c)
  }
  render() {
    return (
      <div>
        <p>{this.state.c}</p>
        <p>{this.state.msg}</p>
        <button
          // onClick={this.handle}
          onClick={() => {
            // 这里的this,其实是render的this
            // 这里我们通过对象调用的模式执行了handle.所以handle中的this就是当前调用handle的对象.而调用handle的对象,其实就是组件实例
            this.handle()
          }}
        >
          +
        </button>
      </div>
    )
  }
}
